<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elFormPark" :model="formDataPark" :rules="rules" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="停车场名称" prop="chid">
            <el-select v-model="formDataPark.chid" placeholder="请选择停车场名称" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in chidOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户类型" prop="buyertype">
            <el-select v-model="formDataPark.buyertype" placeholder="请选择用户类型" clearable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in buyertypeOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停车位编号" prop="sparkcode">
            <el-input v-model="formDataPark.sparkcode" placeholder="请输入停车位编号" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名" prop="buyers">
            <el-input v-model="formDataPark.buyers" placeholder="请输入用户名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门牌号" prop="number">
            <el-input v-model="formDataPark.number" placeholder="请输入门牌号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购买情况" prop="purchasesid">
            <el-select v-model="formDataPark.purchasesid" placeholder="请选择购买情况" clearable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in purchasesidOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停车位尺寸" prop="ctid">
            <el-select v-model="formDataPark.ctid" placeholder="请选择停车位尺寸" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in ctidOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="120px" label="停车位排列方式" prop="arrangeid">
            <el-select v-model="formDataPark.arrangeid" placeholder="请选择停车位排列方式" clearable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in arrangeidOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启用状态" prop="status">
            <el-radio-group v-model="formDataPark.status" size="medium">
              <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="109px" label="是否有充电桩" prop="charge">
            <el-radio-group v-model="formDataPark.charge" size="medium">
              <el-radio v-for="(item, index) in chargeOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据来源" prop="source">
            <el-select v-model="formDataPark.source" placeholder="请选择数据来源" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in sourceOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停车状态" prop="sparkstatus">
            <el-select v-model="formDataPark.sparkstatus" placeholder="请选择停车状态" clearable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in sparkstatusOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formDataPark: {
        chid: 1,
        buyertype: 0,
        sparkcode: undefined,
        buyers: undefined,
        number: undefined,
        purchasesid: 0,
        ctid: 0,
        arrangeid: 0,
        status: 0,
        charge: 0,
        source: 0,
        sparkstatus: 0,
      },
      rules: {
        chid: [{
          required: true,
          message: '请选择停车场名称',
          trigger: 'change'
        }],
        buyertype: [{
          required: true,
          message: '请选择用户类型',
          trigger: 'change'
        }],
        sparkcode: [{
          required: true,
          message: '请输入停车位编号',
          trigger: 'blur'
        }],
        buyers: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        number: [{
          required: true,
          message: '请输入门牌号',
          trigger: 'blur'
        }],
        purchasesid: [{
          required: true,
          message: '请选择购买情况',
          trigger: 'change'
        }],
        ctid: [{
          required: true,
          message: '请选择停车位尺寸',
          trigger: 'change'
        }],
        arrangeid: [{
          required: true,
          message: '请选择停车位排列方式',
          trigger: 'change'
        }],
        status: [{
          required: true,
          message: '启用状态不能为空',
          trigger: 'change'
        }],
        charge: [{
          required: true,
          message: '是否有充电桩不能为空',
          trigger: 'change'
        }],
        source: [{
          required: true,
          message: '请选择数据来源',
          trigger: 'change'
        }],
        sparkstatus: [{
          required: true,
          message: '请选择停车状态',
          trigger: 'change'
        }],
      },
      chidOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      buyertypeOptions: [{
        "label": "业主",
        "value": 0
      }, {
        "label": "租户",
        "value": 1
      }],
      purchasesidOptions: [{
        "label": "空闲",
        "value": 0
      }, {
        "label": "已被购买",
        "value": 1
      }, {
        "label": "已被租赁",
        "value": 2
      }, {
        "label": "审核中",
        "value": 3
      }],
      ctidOptions: [{
        "label": "小车型",
        "value": 0
      }, {
        "label": "大车型",
        "value": 1
      }],
      arrangeidOptions: [{
        "label": "平行",
        "value": 0
      }, {
        "label": "垂直",
        "value": 1
      }, {
        "label": "侧斜",
        "value": 2
      }],
      statusOptions: [{
        "label": "启用",
        "value": 0
      }, {
        "label": "禁用",
        "value": 1
      }],
      chargeOptions: [{
        "label": "没有",
        "value": 0
      }, {
        "label": "有",
        "value": 1
      }],
      sourceOptions: [{
        "label": "PDA",
        "value": 0
      }, {
        "label": "监控",
        "value": 1
      }, {
        "label": "所有",
        "value": 2
      }],
      sparkstatusOptions: [{
        "label": "空闲",
        "value": 0
      }, {
        "label": "正在停车",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elFormPark'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elFormPark'].resetFields()
    },
  }
}

</script>
<style>
</style>

